<template>
<div>
  <userItem></userItem>
  <asideRouteStudent current-page="2-2"></asideRouteStudent>
  <div id="main">
  <el-table
      :data="itemData.filter(data => !search || data.course.toLowerCase().includes(search.toLowerCase())|| data.teacher.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%" stripe border max-height="400" size="big" fit>
    <el-table-column
        label="课程名称"
        prop="course" sortable="true">
    </el-table-column>
    <el-table-column
        label="任课老师"
        prop="teacher" sortable="true" sort-by="teacher">
    </el-table-column>
    <el-table-column
        label="成绩"
        prop="grade" sortable="true" sort-by="grade">
    </el-table-column>
    <el-table-column
        align="center">
      <template slot="header" slot-scope="scope">
        <el-input
            v-model="search"
            size="mini"
            placeholder="搜索课程/教师"/>
      </template>
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleDetail(scope.$index, scope.row)" type="warning" plain icon="el-icon-info">信息</el-button>
      </template>
    </el-table-column>
  </el-table>
    <div id="timeTable">
      <h1 style="color: goldenrod">我的课程表</h1>
      <el-table
          :data="timetableData"
          max-width="300px" stripe border max-height="420px"  size="big" fit empty-text="暂无数据">
        <el-table-column
            label="上课时间"
            prop="position" sortable="true" :label-width="formLabelWidth">
        </el-table-column>
        <el-table-column
            label="星期一"
            prop="monday" sortable="true" style="display: inline-flex">
        </el-table-column>
        <el-table-column
            label="星期二"
            prop="tuesday" sortable="true" sort-by="date" :label-width="formLabelWidth" style="display: inline-flex">
        </el-table-column>
        <el-table-column
            label="星期三"
            prop="wednesday" sortable="true" sort-by="number" :label-width="formLabelWidth" style="display: inline-flex">
        </el-table-column>
        <el-table-column
            label="星期四"
            prop="thursday" sortable="true" sort-by="number" :label-width="formLabelWidth" style="display: inline-flex">
        </el-table-column>
        <el-table-column
            label="星期五"
            prop="friday" sortable="true" sort-by="number" :label-width="formLabelWidth" style="display: inline-flex">
        </el-table-column>
        <el-table-column
            label="星期六"
            prop="saturday" sortable="true" sort-by="number" :label-width="formLabelWidth" style="display: inline-flex">
        </el-table-column>
        <el-table-column
            label="星期日"
            prop="sunday" sortable="true" sort-by="number" :label-width="formLabelWidth" style="display: inline-flex">
        </el-table-column>
      </el-table>
      <div id="blankspace"></div>
    </div>

  </div>
  <div>
    <el-dialog
        title="详细信息"
        :visible.sync="dialogVisible"
        width="30%">
      <span>{{introduce}}</span><br>
      <span>每周上课时间是：{{currday}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
import userItem from "../components/userItem";
import asideRouteStudent from "../components/asideRouteStudent";
import request from "../../utils/request";

export default {
  name: "Mycourse",
  data(){
    let user=JSON.parse(sessionStorage.getItem("user"));
    request.post("/api/course/getAllCourse").then(res=>{
      console.log(res);
      this.tableData=res.data;//这里data是“课程数组”的数组，包括所有课程
      request.post("api/selectandgrade/timeTablequery",sessionStorage.getItem("user")).then(res=>{
        console.log(res);
        this.timetableData=res.data;
      })
      request.post("/api/selectandgrade/stuquery",user).then(res=>{
        console.log(res);
        this.itemData=res.data;
        for(let i = 0;i<this.itemData.length;i++){
          let isfind=false;
          let index=0;
          while(!isfind&&index<this.tableData.length){
            if(this.tableData.filter(data => !this.search || data.course.toLowerCase().includes(this.search.toLowerCase())|| data.teacher.toLowerCase().includes(this.search.toLowerCase()))[index].name===this.itemData[i].course){
              isfind=true;
              this.introData[i]=this.tableData.filter(data => !this.search || data.course.toLowerCase().includes(this.search.toLowerCase())|| data.teacher.toLowerCase().includes(this.search.toLowerCase()))[index];
            }
            index++;
          }
        }
      });
    });

    return{
      formLabelWidth: '100px',
      search:'',
      tableData:[],
      itemData:[],
      introData:[],
      timetableData:[],
      choose:[],
      dialogVisible:false,
      introduce:'',
      currday:"",
      course:{
        id:'',
        name:'',
        teacher:'',
        limitedate:'',
        intro:'',
        number:'',
      },
      item:{
        course:'',
        teacher:'',
        student:'',
        grade:'',
        id:'',
      },
    }
  },
  components:{
    userItem,
    asideRouteStudent,
  },
  methods:{
    handleDetail(index, row) {
      console.log(index, row);
      this.introduce=this.introData.filter(introData =>!this.search || introData.name.toLowerCase().includes(this.search.toLowerCase())|| introData.teacher.toLowerCase().includes(this.search.toLowerCase()))[index].intro;
      this.currday=this.introData.filter(introData =>!this.search || introData.name.toLowerCase().includes(this.search.toLowerCase())|| introData.teacher.toLowerCase().includes(this.search.toLowerCase()))[index].time;

      this.dialogVisible=true;
    },
  }
}
</script>

<style scoped>
#main{
  position:absolute;
  right: 23%;
  width: 50%;
  margin-top: 50px;
}
#timeTable{
  position: absolute;
  width:100%;
  margin-top: 30px;
  margin-bottom:15%;
}
#blankspace{
  height: 30px;

}
</style>
